//  模块化导入ajax
import ajax from './ajax.js'
if (!localStorage.getItem('article_list')) {
    //如果本地储存没有，发起请求
    ajax({
        url: '/mock',
        data: {
            t: 2
        },
    }).then((res) => {
        // console.log(1, res.data);
        // console.log('走请求');
        // 将数据存储到本地
        let data = res.data
        localStorage.setItem('article_list', JSON.stringify(data))
        // 渲染页面
        render(data)
    }).catch((err) => {
        console.log(err);
    })
} else {
    // 如果本地储存有，获取本地数据
    let data = JSON.parse(localStorage.getItem('article_list'))
    // console.log('缓存');
    // console.log(data);
    render(data)
}
// 定义渲染函数
function render(arr) {
    let str = ''
    arr.forEach((item) => {
        // console.log(item);
        str += `<tr>
            <td>${item.id}</td>
            <td>${item.title}</td>
            <td>${item.user}</td>
            <td>${item.date}</td>
            <td>
                <button type="button" class="btn btn-danger del" id='${item.id}'>删除</button>
                <button type="button" class="btn btn-primary edit" id='${item.id}'>编辑</button>
            </td>
        </tr>`
    })
    document.querySelector('.con tbody').innerHTML = str
}
// 新增功能
let data = JSON.parse(localStorage.getItem('article_list'))
document.querySelector('.add').onclick = function () {
    // 说明点击的是新增按钮
    let obj = {}
    obj.id = data[data.length - 1].id * 1 + 1
    obj.title = document.querySelector('.title').value
    obj.user = document.querySelector('.user').value
    obj.date = document.querySelector('.date').value
    data.push(obj)
    localStorage.setItem('article_list', JSON.stringify(data))
    render(data)
}

// 给tbody绑定事件委托
document.querySelector('tbody').onclick = function (e) {
    // 删除功能
    if (e.target.className.includes('del')) {
        // 说明点击的是删除按钮
        // console.log(e.target.parentNode.parentNode.children[0].innerHTML);
        e.target.parentNode.parentNode.remove()
        let newArr = data.filter(function (item) {
            return item.id != e.target.id
        })
        data = newArr
        localStorage.setItem('article_list', JSON.stringify(data))
        render(data)

    }
    // 编辑功能
    if (e.target.className.includes('edit')) {
        //渲染时给其设置id属性为其编号
        console.log(e.target.id);
        // 说明点击的是编辑按钮
        $('#myModal').modal('show');
        // 添加模态框的标题
        let currentObj = data.find(function (item) {
            return item.id == e.target.id
        })
        console.log(currentObj);
        document.querySelector('.modaltitle').value = currentObj.title
        document.querySelector('.modaluser').value = currentObj.user
        document.querySelector('.modaldate').value = currentObj.date

        let id = e.target.id
        document.querySelector('.editSure').onclick = function () {
            // 第一步: 先隐藏模态框
            $('#myModal').modal('hide');
            data.forEach(function (item) {
                if (item.id == id) {
                    console.log(id);
                    item.title = document.querySelector('.modaltitle').value
                    item.user = document.querySelector('.modaluser').value
                    item.date = document.querySelector('.modaldate').value
                }
            })
            render(data)
            localStorage.setItem('article_list', JSON.stringify(data))
        }
    }
}
document.querySelector('.close1').onclick = function () {
    $('#myModal').modal('hide');}